<template>
  <view class="hegui">
    <shopro-navbar :isBack="false" class="hegui_top">
      <view
        slot="left"
        class="active"
        v-if="JSON.stringify(from_page_hugui) != '{}'"
        @tap="toActive"
        ><u-icon
          name="arrow-left"
          class="active_icon"
          size="24"
          color="#000"
        ></u-icon
        ><view class="toActive">返回活动</view></view
      >
      <view slot="content" class="title_box">我的盒柜</view>
    </shopro-navbar>
    <view class="top">
      <img
        :src="
          $IMG_URL + '/uploads/20230428/41d3473d1db2e26ea5e02fcab2f8c69a.png'
        "
      />
      <view class="text">
        <text>已拥有</text>
        <text class="text_num">{{ boxNumber || 0 }}</text>
        <text>个</text>
      </view>
    </view>
    <!-- 一级筛选 -->
   <view class="top_tab">
      <u-tabs
        ref="tabs"
        :list="firstList"
        :is-scroll="true"
        :current="current"
        @change="change"
        active-color="#3D3D3D"
        inactive-color="#939393"
        height="60"
        gutter="22"
        :bar-style="bar_style"
        :active-item-style="active_item"
      ></u-tabs>
    </view>
    <!-- 二级筛选 -->
    <view class="two_tab">
      <view
        :class="two_tab_item == index ? 'active_two_tab' : 'no_active_two_tab'"
        @click="onClickHandle($event, 'changeTwo_tab_item', { index })"
        v-for="(item, index) in two_tab_list"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <view class="main">
      <u-checkbox-group
        @change="checkboxGroupChange"
        class="checkgroup"
        v-if="tabelist.length > 0"
      >
        <scroll-view
          scroll-y="true"
          enable-back-to-top
          @scrolltolower="loadmoerPage"
          class="scroll-box"
        >
          <view class="scroll" >
            <u-checkbox
			style="position: relative;"
              :class="checked == false ? 'noCheckbox' : 'checkbox'"
              @change="checkboxChange"
              v-model="item.checked"
			  :acttime="item.acttime"
			  acss="1"
              shape="circle"
              active-color="#A084F0"
              :name="item.name"
              v-for="(item, index) in tabelist"
              :key="index"
              :disabled="ifDisable"
            >
			<view :style="{background:item.level_name=='普通'?'#dac89b':item.level_name=='热门'?'#6a87d7':item.level_name=='欧皇'?'#dd78b6':item.level_name=='传说'?'#996bd8':'#d86a6f'}" style="position: absolute;width:100%;height:194rpx;">
				
			</view>
			
			<!-- <image style="position: absolute;width:100%;height:194rpx;" mode="center"  :src="typeList[item.level_id].bg"></image> -->
            
			
			<view v-if="item.acttime>0" class="box" @tap="lookDetailsMod(item)">
			  <img :src="item.goods_image" alt="" />
			  <view class="box_bottom">
			    <image mode="widthFix" src="/static/at3.png" />
			    <text class="right_text">临时赏</text>
			  </view>
			  <view class="top_rignt" style="background:rgba(0, 0, 0,0.3);width: 100%;text-align: center;z-index: 99;;">
			    <u-count-down bg-color="transparent" color="#fff" separator-color="#fff" font-size="24" :timestamp="item.acttime"></u-count-down>
			  </view>
			</view>
			
			
			  <view v-else class="box" @tap="lookDetailsMod(item)">
                <img :src="item.goods_image" alt="" />
                <view class="box_bottom">
                  <image mode="widthFix" :src="levelImg[item.level_id]" />
                  <!-- <text class="pai">{{ item.level_name.charAt(0) }}</text> -->
                  <text class="right_text">{{ item.goods_name }}</text>
                </view>
                <!-- <view class="top_rignt">
                  <img :src="activeImg[item.activity_type]" alt="" />
                  <text>{{ item.activity_name }}</text>
                </view> -->
              </view>
			  
			 
			  
            </u-checkbox>
            <u-loadmore
              class="loadmore"
              v-show="!isEmpty"
              height="80rpx"
              :status="status"
              icon-type="flower"
              color="#ccc"
            />
          </view>
        </scroll-view>
      </u-checkbox-group>
      <!-- 缺省页 -->
      <shopro-empty
        v-if="isEmpty"
        :image="
          $IMG_URL + '/uploads/20230527/424dc1c21b1ca046e1c6e75ec2fde116.png'
        "
        tipText="你的盒柜空空如也~"
        marginTop="62rpx"
      ></shopro-empty>
    </view>
    <view class="bottom">
		
      <view class="fahuo" @click="toCheckFahuo" v-if="showFaji">发货</view>
	  
	  <view
	   style="background: #32a6fb;"
	      class="jishou"
	      v-if="showzhuanzeng"
	      @click="tozhuanzeng"
	      >转赠</view
	    >
	 <!-- <view
	     class="jishou"
	     v-if="showFaji"
	     @click="toCheckJishou"
	     >退费</view
	   > -->
	  <view
	    class="fahuo"
	    v-if="yeszeng"
	    @click="onClickHandle('', 'tozeng', {})"
	    >确认转赠</view
	  >
	  
      <view
        class="fahuo"
        v-if="yesFahuo"
        @click="onClickHandle('', 'toFahuo', {})"
        >确认发货</view
      >
      <view
        class="yesjishou"
        v-if="yesJishou"
        @click="onClickHandle('', 'toFastJishou', {})"
        >确认退费</view
      >
	  
      <view class="quxiao" v-if="!showFaji" @click="toQuxiao">取消</view>
      <view class="all" v-if="!showFaji">
        <u-checkbox-group class="allCheck">
          <u-checkbox
            @change="allChecked"
            v-model="allCheck"
            name="全选"
            active-color="#A084F0"
            shape="circle"
            size="50"
            >全选<text>(已选 {{ selectnumer }} 个)</text>
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <!-- 款式详情 -->
    <shopro-commodity-details
      :product-id="productId"
      @changeDetailsMod="changeDetailsMod"
      v-if="productDetails"
    ></shopro-commodity-details>
    <!-- 需要登陆 -->
    <!-- <shopro-auth-modal></shopro-auth-modal> -->
	
	
	
	<u-popup
	  v-model="showModal"
	  :border-radius="20"
	  mode="center"
	   isbg="transparent"
	  :closeable="false"
	  >
	 <view style="background: #ecf6fb;border-radius: 20rpx;">
			 <view style="width:500rpx;height: 600rpx;">
				 <image class="image posiab" style="height: 600rpx;"  :src="$IMG_URL + '/uploads/20241204/ef02b17b2bca465e0535f03db9663c16.png'"></image>
				<view class="flex-ju-c" style="height:600rpx;">
						<view style="background: #fff;position: relative;z-index: 5;width:450rpx;height: 550rpx;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.2);border-radius: 20rpx;padding:12px;">
						<scroll-view scroll-y style="height: 500rpx;">
							<view v-html="textnode"></view>
						</scroll-view>
						</view>
				</view>
			 </view>
		
	 </view>
	 <view @click="showModal = false" class="u-flex" style="justify-content: center;margin-top:20rpx;">
	 	<u-icon name="close-circle" size="50" color="#ccc"></u-icon>
	 </view>
	</u-popup>
	
	
	
	<u-popup
	  mode="center"
	  :mask-close-able="false"
	  :closeable="false"
	  isbg="transparent"
	  v-model="showIllustrate1"
	>
	  <view class="bgfff pb15" style="border-radius: 20rpx;">
		  <view class="shuoming_box ">
		  	<view class="title flex-ju-c pt20">选择转赠方式</view>
		  	<view class="mt10" style="padding:30rpx;color:#000;">
		  		<u-radio-group style="display: flex;justify-content:space-between;" v-model="radiovalue1"
		  			placement="column" >
		  			<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
		  				:label="item.name" :name="item.name" @change="cgroupChange(index)">
		  				{{item.name}}
		  			</u-radio>
		  		</u-radio-group>
	  </view>
			<view @click="queto" class="pay_btn ">确定</view>
	  </view>
	  </view>
	<view @click="showIllustrate1=false" class="u-flex" style="justify-content: center;margin-top:20rpx;">
		<u-icon name="close-circle" size="50" color="#fff"></u-icon>
	</view>
	</u-popup>
  </view>
</template>
<script>
	// import {
	// 	DRAW_TYPE
	// } from '../rewardGoods/portrait/portait_config.js';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import le1 from './images/le1.png';
import le2 from './images/le2.png';
import le3 from './images/le3.png';
import le4 from './images/le4.png';
import le5 from './images/le5.png';
import at1 from './images/at1.png';
import at2 from './images/at2.png';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
		cindex:0,
		radiovalue1: '转赠平台用户',
		radiolist1: [{
				name: '转赠平台用户',
				disabled: false
			},
			{
				name: '转赠好友',
				disabled: false
			}
		
		],
		showIllustrate1:false,
		selectnumer:"",
		textnode:"",
		showModal:false,
		timestamp:860,
	// typeList:DRAW_TYPE,
      //当前查看商品id
      productId: '',
      num: 0,
      firstList: [],
      current: '0',
      bar_style: {
        backgroundColor: '#A084F0',
        borderRadius: '3rpx',
        // width: '40rpx',
        // border: '3rpx solid #A084F0',
      },
      active_item: {
        transform: 'scale(1.2)',
        fontFamily: 'PingFang SC-Regular, PingFang SC',
        fontWeight: '700',
      },
      two_tab_item: '0',
      two_tab_list: ['全部', '普通款', '热门款', '欧皇款', '传说款', '至尊款'],
      tabelist: [],
      //通过ID控制令牌的底板颜色
      levelImg: {
        1: le1,
        2: le2,
        3: le3,
        4: le4,
        5: le5,
      },
      //通过活动ID控制活动底牌的颜色
      activeImg: {
        1: at1,
        2: at2,
      },
      getList: {},
      // 设置多选框禁用
      ifDisable: true,
      //控制多选框选择框的显隐
      checked: false,
      //控制按钮显隐
      showFaji: true,
	  showzhuanzeng:true,
	  yeszeng:false,
      yesFahuo: false,
      yesJishou: false,
      allCheck: false,
      //已选盒柜
      selectFahuo: [],
      status: 'loadmore',
      page: 1,
      loadText: {
        loadmore: '点击加载更多',
        loading: '努力加载中',
        nomore: '实在没有了',
      },
      showMore: true,
      // 查看款式详情
      productDetails: false,
      from: '',
      boxNumber: '', //盒柜总数
      activity_type: 'all',
      isEmpty: false,
      //下拉完成到底
      finished: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters([
      'initShop',
      'userTemplate',
      'isLogin',
      'userInfo',
      'authType',
      'cartOnshow',
      'from_page_hugui',
    ]),
  },
  // 数据监听
  watch: {
    // 监听selectFahuo的变化判断是否全选
    selectFahuo(val) {
		this.selectnumer = 0
		val.map(item=>{
			if(JSON.parse(item).acttime&&JSON.parse(item).acttime > 0){
				
			}else{
				this.selectnumer++
			}
		})
		
      if (val.length > 0 && val.length === this.tabelist.length&&this.selectnumer>0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    userInfo(val) {
     // this.getBoxList();
      this.selectFahuo = [];
      this.page = 1;
      this.showMore = true;
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  mounted() {
   // this.getBoxList();
    this.getCabinet();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getBoxNumber();
	this.yesFahuo=false
	this.selectFahuo=[]
    if (this.cartOnshow == true) {
      this.getBoxList();
      // this.selectFahuo = [];
      this.page = 1;
      this.showMore = true;
      this.finished = false;
     this.CartOnshow(false);
    }
	setTimeout(()=>{
		this.toQuxiao()
	},300)
  },
  onLoad(e = {}) {
    this.from = e?.from;

  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {
	 this.showFaji = true
    this.changeActiveHGId();
  },
  // 监听页面卸载
  onUnload() {
	  this.showFaji = true
    this.changeActiveHGId();
  },
  methods: {
    ...mapMutations(['CartOnshow']),
    ...mapActions(['changeActiveHGId']),
    //获取盒柜列表
	cgroupChange(item){
		this.cindex=item
	},
	queto(){
		// uni.navigateTo({
		// 	url:"/pages/hegui/zhuanzeng?index="+this.cindex
		// })
		this.getIds('/pages/hegui/zhuanzeng')
	},
	getboxcabinet(){
		
		this.$http(
		  'v1.getboxcabinet',
		 {
		     activity_type:'no_transfer',
			 rows:20
		   },
		   '请稍等'
		 ).then((res) => {
			 
			this.getList = res.data
			this.tabelist = this.getList.list.map((item) => {
			  item.name = JSON.stringify(item);
			  item.checked = false;
			  return item;
			});
			if (this.tabelist.length < 12) {
			  // this.showMore = false;
			  this.status = 'nomore';
			} else {
			  // this.showMore = true;
			  this.status = 'loadmore';
			}
			this.isEmpty = this.tabelist.length == 0 ? true : false;
			
		 })
	},
    //recycle:0是发货，recycle：1是寄售
    getBoxList(recycle = '0') {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.getBox_cabinetList',
          {
            activity_type: this.activity_type,
            level_id: this.two_tab_item,
            recycle: recycle,
            page: 1,
            rows: 30,
          },
          '请稍等'
        ).then((res) => {
          if (res.code === 1) {
            this.getList = res.data;
            this.tabelist = this.getList.list.map((item) => {
              item.name = JSON.stringify(item);
              item.checked = false;
              return item;
            });
            if (this.tabelist.length < 12) {
              // this.showMore = false;
              this.status = 'nomore';
            } else {
              // this.showMore = true;
              this.status = 'loadmore';
            }
            this.isEmpty = this.tabelist.length == 0 ? true : false;
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    //点击加载更多盒柜列表
    getMoreBoxList(recycle = '0', page) {
		
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.getBox_cabinetList',
          {
            activity_type: this.activity_type,
            level_id: this.two_tab_item,
            recycle: recycle,
            page: page,
            rows: 12,
          },
          '请稍等'
        ).then((res) => {
          if (res.code === 1) {
            this.getList = res.data;
            let arrayList = this.getList.list.map((item) => {
              item.name = JSON.stringify(item);
              item.checked = false;
              return item;
            });
            if (arrayList.length == 12) {
              this.tabelist = this.tabelist.concat(arrayList);
              this.status = 'loadmore';
            } else {
              this.tabelist = this.tabelist.concat(arrayList);
              this.status = 'nomore';
              this.finished = true;
            }
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    loadmoerPage() {
		console.log('rrrr')
      if (this.yesJishou == true) {
        if (this.finished) return;
        this.page = this.page + 1;
        this.getMoreBoxList('1', this.page);
      } else {
		  if(this.yeszeng== true){
			   if (this.finished) return;
			   this.page = this.page + 1;
			   
			   this.$http(
			     'v1.getboxcabinet',
			    {
			        activity_type:'no_transfer',
					page: this.page,
					rows: 12,
			      },
			      '请稍等'
			    ).then((res) => {
					
					this.getList = res.data;
					let arrayList = this.getList.list.map((item) => {
					  item.name = JSON.stringify(item);
					  item.checked = false;
					  return item;
					});
					if (arrayList.length == 12) {
					  this.tabelist = this.tabelist.concat(arrayList);
					  this.status = 'loadmore';
					} else {
					  this.tabelist = this.tabelist.concat(arrayList);
					  this.status = 'nomore';
					  this.finished = true;
					}
					
			    })
			   
		  }else{
			  if (this.finished) return;
			  this.page = this.page + 1;
			  this.getMoreBoxList('0', this.page);
		  }
       
      }

      this.allCheck = false;
    },
    change(index) {
		console.log("tttt")
      this.activity_type = this.firstList[index].value;
      this.current = index;
      this.finished = false;
      if (this.yesJishou == true) {
        this.getBoxList('1');
        this.page = 1;
      } else {
        this.getBoxList('0');
        this.page = 1;
      }
    },
    changeTwo_tab_item(item) {
      this.two_tab_item = item;
      this.finished = false;
      if (this.yesJishou == true) {
        this.getBoxList('1');
        this.page = 1;
      } else {
        this.getBoxList('0');
        this.page = 1;
      }
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
		
		
		
		if(JSON.parse(e.name).acttime > 0){
			// uni.showToast({
				
			// })
			if(!this.textnode){
				this.$http('v1.getProtocol', {
					id:12
				})
				  .then((res) => {
				    if (res.code === 1) {
				       this.textnode = res.data[0].content
						 this.showModal = true
				    }
				  })
				  .catch(() => {});
			}else{
				this.showModal = true
			}
			  
			return
		}
		
      if (e.value) {
		  
		  
        this.selectFahuo = [...new Set([...this.selectFahuo, e.name])];
		
		
		
      } else {
        let index = this.selectFahuo.indexOf(e.name);
        if (index > -1) {
          let arr = [...this.selectFahuo];
          arr.splice(index, 1);
          this.selectFahuo = arr;
        }
      }
	  
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {},
    // 全选
    allChecked() {
		
		
      let arr = [...this.tabelist];
	  let num = 0
	  arr.map((item) => {
		  
		  if(item.acttime&&item.acttime > 0){
			num++  
		  }
		  
	  });
	  
	  if(num&&num == arr.length){
		  if(!this.textnode){
		  	this.$http('v1.getProtocol', {
		  		id:12
		  	})
		  	  .then((res) => {
		  	    if (res.code === 1) {
		  	       this.textnode = res.data[0].content
		  			 this.showModal = true
		  	    }
		  	  })
		  	  .catch(() => {});
		  }else{
		  	this.showModal = true
		  }
	  }
	  
      if (this.allCheck == true) {
        this.tabelist = arr.map((item) => {
          item.checked = false;
          return item;
        });
        this.selectFahuo = [];
      }
      if (this.allCheck == false) {
        this.tabelist = arr.map((item) => {
          item.checked = true;
		   return item;
        });
		
		
        this.selectFahuo = arr.map((item) => {
			
          return item.name;
		  
        });
		
		
      }
	  
    },
	tozhuanzeng(){
		this.showzhuanzeng=false
		this.yeszeng=true
		this.showFaji=false
		
		this.checked = true;
		this.ifDisable = false;
		
		this.getboxcabinet('1');
		this.page = 1;
	},
	
    toCheckFahuo() {
      this.ifDisable = false;
      this.checked = true;
      this.showFaji = false;
      this.yesFahuo = true;
      this.finished = false;
	  this.showzhuanzeng=false
    },
    toCheckJishou() {
      this.ifDisable = false;
      this.checked = true;
      this.showFaji = false;
      this.yesJishou = true;
      this.finished = false;
	  this.showzhuanzeng=false
      this.getBoxList('1');
      this.page = 1;
    },
    toQuxiao() {
			this.showzhuanzeng=true
		this.yeszeng = false;
		
      this.checked = false;
      this.ifDisable = true;
      this.showFaji = true;
      this.yesFahuo = false;
      this.yesJishou = false;
      this.finished = false;
      this.getBoxList();
      this.selectFahuo = [];
      this.page = 1;
    },
    toFastJishou() {
      this.getIds('/pages/hegui/fastJishou');
    },
    toFahuo() {
      this.getIds('/pages/hegui/fahuo');
    },
	tozeng(){
		this.showIllustrate1=true
		// this.getIds('/pages/hegui/zhuanzeng');
	},
    //将挑选的商品id用ids数组存放
    getIds(url) {
		
      let data = [...this.selectFahuo];
	  
      let idsArray = [];
        data.forEach((item) => {
			if(JSON.parse(item).acttime > 0){
				
			}else{
				idsArray.push(JSON.stringify(JSON.parse(item).id));
			}
			
        });
		
		if(idsArray.length){
			this.$Router.push({
			  path: url,
			  query: {
				index:this.cindex,
			    ids: idsArray,
			  },
			})
			
			this.showIllustrate1=false
		}else {
        uni.showToast({
			icon:"none",
          title: '请选择商品',
          duration: 2000,
        });
      }
		
    },

    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          //二级标签
          case 'changeTwo_tab_item':
            this.changeTwo_tab_item(data.index);
            break;
          //确认发货
          case 'toFahuo':
            this.toFahuo();
            break;
          //快速寄售
		  case 'tozeng':
		  
		  
		  if(this.yeszeng){
		  	if(this.selectFahuo.length>1){
		  			uni.showToast({
		  				title:"最多转赠一个",
		  				icon:"none"
		  			})
		  			return
		  	}
		  }
		    this.tozeng();
		    break;
          case 'toFastJishou':
            this.toFastJishou();
            break;
        }
      });
    },

    // 显示隐藏 商品详情
    changeDetailsMod(ev) {
      this.productId = '';
      this.productDetails = ev;
    },
    // 查看 商品详情
    lookDetailsMod(ev) {
      if (!this.ifDisable) return;
      this.productId = ev;
      this.productDetails = true;
    },
    toActive() {
      switch (this.from_page_hugui?.type) {
        case 'luckybag':
          uni.navigateTo({
            url: `/pages/fukubukuro/extract/extract?id=${this.from_page_hugui.id}`,
          });
          break;
        case 'yfs':
          uni.navigateTo({
            url: `pages/rewardGoods/portrait/index?id=${this.from_page_hugui.id}`,
          });
          break;
      }
      this.changeActiveHGId();
    },
    //一级(活动类型)列表
    getCabinet() {
      this.$http('v1.getCabinet', {}).then((res) => {
        if (res.code === 1) {
			var bbog = { 
				name:"临时赏",
				value:'lss'
			}
			res.data.list.map((item,index)=>{
				if(index < 2 ){
					this.firstList.push(item)
				}
			})
			//this.firstList.push(bbog)
        }
      });
    },
    //获取盒柜总数
    getBoxNumber() {
      this.$http('v1.boxcabinet', {
        id: this.userInfo.id,
      }).then((res) => {
        this.boxNumber = res.data;
      });
    },
    //跳到首页
    toIndex() {
      uni.switchTab({
        url: 'pages/index/index',
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>

<style lang="scss" scoped>
	.pay_btn {
		width: 80%;
		height: 76rpx;
		background: #a084f0;
		border-radius: 168rpx 168rpx 168rpx 168rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 76rpx;
		text-align: center;
		margin: auto;
	}
.hegui {
  display: flex;
  // overflow: hidden;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 201rpx;
    position: relative;
    img {
      width: 100%;
      height: 201rpx;
    }
    .text {
      position: absolute;
      left: 68rpx;
      top: 25%;
      display: inline-block;
      font-size: 64rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      .text_num {
        color: #a084f0;
        margin-left: 20rpx;
        margin-right: 20rpx;
        font-weight: 700;
      }
    }
  }
  .top_tab {
    padding-left: 36rpx;
    background-color: #fff;
    height: 60rpx;
  }
  .two_tab {
    display: flex;
    align-items: center;
    padding-left: 52rpx;
    padding-top: 20rpx;
    background-color: #fff;
    padding-bottom: 23rpx;
    height: 68rpx;
    box-sizing: border-box;
    .active_two_tab {
      width: 106rpx;
      height: 46rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 46rpx;
      text-align: center;
      background: #a084f0;
      border-radius: 22rpx;
      margin-right: 9rpx;
    }
    .no_active_two_tab {
      width: 106rpx;
      height: 44rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 300;
      color: #939393;
      line-height: 44rpx;
      text-align: center;
      background: #fff;
      border-radius: 22rpx;
      margin-right: 9rpx;
      border: 1rpx solid #cfcfcf;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    overflow: auto;
    .checkgroup {
      .scroll-box {
        height: calc(100vh - 340rpx);
        // padding-bottom: 118rpx;
      }
      .noCheckbox {
       
         background-size: 100% 197rpx;
        margin-right: 6rpx;
        margin-left: 30rpx;
        width: 206rpx;
        height: 240rpx;
        display: inline-block;
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        /deep/ .u-checkbox__icon-wrap {
          display: none;
        }
		
      }
      .checkbox {
        // background: url($IMG_URL + '/uploads/20230504/4daf1ee7518e2b8e79e4c6037d74ce2e.png')
        //   no-repeat;
		 
        background-size: 100% 197rpx;
        margin-right: 6rpx;
        margin-left: 30rpx;
        width: 206rpx;
        height: 240rpx;
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
        margin-bottom: 20rpx;
        border-radius: 10rpx;
		
        // /deep/ .u-checkbox {
        //   position: relative;
        //   float: none !important;
        //   display: inline-block;
        //   .u-checkbox__icon-wrap {
        //     width: 18rpx !important;
        //     height: 18rpx !important;
        //     opacity: 1;
        //     border: 2rpx solid #fff;
        //     position: absolute;
        //     top: 7%;
        //     left: 7%;
        //     z-index: 1;
        //   }
        //   .u-checkbox__icon-wrap--checked {
        //     border-color: #febd50 !important;
        //     background-color: #a084f0 !important;
        //     box-shadow: 0 0 2rpx 2rpx #a084f0 !important;
        //   }
        //   .u-checkbox__icon-wrap__icon {
        //     display: none !important;
        //   }
        // }
      }
      /deep/ .u-checkbox {
        // width: 230rpx !important;
        // height: 230rpx !important;
        float: none !important;
      }
      .loadmore {
        // float: left;
        width: 100%;
        height: 200rpx;
      }
      .scroll {
        // padding-left: 30rpx;
        padding-right: 24rpx;
        padding-top: 10rpx;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        /deep/ .u-checkbox__label {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
        .box {
          width: 206rpx;
          height: 240rpx;
          position: relative;
          // overflow: hidden;
          // margin-bottom: 100rpx;
          img {
            width: 100%;
            height: 197rpx;
            display: block;
          }
          .box_bottom {
            height: 43rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 14rpx;
            image {
              width: 35rpx;
              height: 45rpx;
            }
            // .pai {
            //   font-size: 18rpx;
            //   font-family: FZShaoEr-M11S-Regular, FZShaoEr-M11S;
            //   font-weight: 400;
            //   color: #ffffff;
            //   position: absolute;
            //   left: 24rpx;
            //   top: 4rpx;
            // }
            .right_text {
              height: 43rpx;
              max-width: 130rpx;
              line-height: 43rpx;
              font-size: 24rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 700;
              color: #3d3d3d;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-left: 10rpx;
            }
          }
          .top_rignt {
            position: absolute;
            bottom: 43rpx;
            right: 0;
            z-index: 1;
            img {
              width: 50rpx;
              height: 50rpx;
            }
            // text {
            //   position: absolute;
            //   display: inline-block;
            //   font-size: 12rpx;
            //   font-family: PingFang SC-Bold, PingFang SC;
            //   font-weight: 400;
            //   color: #ffffff;
            //   transform: rotate(45deg);
            //   -ms-transform: rotate(45deg);
            //   top: 2rpx;
            //   right: 0;
            // }
          }
        }
      }
    }
    /deep/ .empty-img {
      width: 416rpx;
    }
    /deep/ .empty-text {
      margin-top: 40rpx;
    }
  }

  .bottom {
    width: 694rpx;
    height: 112rpx;
    background: rgba(213, 199, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 433rpx;
    position: absolute;
    left: 29rpx;
    bottom: 6rpx;
    padding: 26rpx 27rpx 25rpx 25rpx;
    box-sizing: border-box;
    z-index: 999;
    .fahuo {
      width: 162rpx;
      height: 61rpx;
      background: #a084f0;
      border-radius: 179rpx 179rpx 179rpx 179rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 61rpx;
      text-align: center;
      float: right;
      opacity: 1;
      z-index: 999;
    }
    .jishou {
      width: 162rpx;
      height: 61rpx;
      background: #ffb84c;
      border-radius: 179rpx 179rpx 179rpx 179rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 61rpx;
      text-align: center;
      float: right;
      margin-right: 18rpx;
      opacity: 1;
      z-index: 999;
    }
    .yesjishou {
      width: 162rpx;
      height: 61rpx;
      background: #a084f0;
      border-radius: 179rpx 179rpx 179rpx 179rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 61rpx;
      text-align: center;
      float: right;
      opacity: 1;
      z-index: 999;
    }
    .quxiao {
      width: 162rpx;
      height: 61rpx;
      background: #f38484;
      border-radius: 179rpx 179rpx 179rpx 179rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 61rpx;
      text-align: center;
      float: right;
      margin-right: 18rpx;
      opacity: 1;
      z-index: 999;
    }
    .all {
      display: flex;
      height: 61rpx;
      align-items: center;
      /deep/ .u-checkbox__icon-wrap {
        border: 2rpx solid #fff;
      }
      /deep/ .u-checkbox__label {
        font-size: 24rpx !important;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #111111 !important;
      }
      text {
        display: inline-block;
        font-size: 16rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #111111;
        margin-left: 10rpx;
      }
    }
  }
  .hegui_top {
    /deep/ .content {
      display: flex;
      text-align: center;
      justify-content: center;
    }
    .title_box {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
    .active {
      display: flex;
      align-items: center;
      .toActive {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #3d3d3d;
      }
    }
  }
}


</style>
